<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
    <script src="./js/earthsdk.js"></script>
    <script src="./js/Colorpicker.js"></script>
    <!-- 自定义Css样式 -->
    <link rel="stylesheet" href="./css/example1.css" />
    <title>GeoJSON</title>
    <style>
        html,
        body,
        #app {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #panel {
            display: grid;
            grid-template-columns: 120px 160px 20px;
            align-items: center;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <div id="panel">
        <label for="">可视化距离计算</label>
        <input type="number" id="distance" value="1000" onchange="changeDistance">M
    </div>
    <script>
        /** ---------------------------------地球创建------------------------------------**/

        // Vue中引入方式：import { ESObjectsManager } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';
        const { ESObjectsManager } = XE2["esobjs-xe2-plugin-main"];
        const objm = new ESObjectsManager();
        window.g_objm = objm;
        // 创建Cesium视口
        const viewer = objm.createCesiumViewer({
            domid: document.getElementById("app"),
        });
        viewer.ionAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyZmQzMDI1OC1kMWYyLTQ1ZjEtYTJmNS0yMjY1ZDcxZjEyOTkiLCJpZCI6NjQ3MTgsImlhdCI6MTYyOTQzNDM5M30.m8vkzG05QiAfe6JQ0XPK8z_6KuUVMf_CoSY-YlMnAIg"

        // 监听视口状态
        viewer.statusChanged.don((status) => {
            if (status == "Created") {
                // 视口创建完成，飞到初始视角位置
                objm.activeViewer.flyIn(
                    [112.50822239361301, 24.184200588142783, 117.67829302617332],
                    [343.750015528038, -34.091324192800556, 359.99981961448066],
                    3
                );
            }
        });
        // 通过json创建一个影像图层
        const imageryLayer = objm.createSceneObjectFromJson({
            id: "9812a65f-0de0-4f7b-b234-809c0c2fb8ef",
            type: "ESImageryLayer",
            url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
        });

        /** ---------------------------------创建可视化对象------------------------------------**/
        const sceneObj = objm.createSceneObjectFromJson({
            "id": "b88d1189-7f10-48bd-8eb0-49bf03e7d810",
            "type": "ESPipeline",
            "name": "单箭头管线1",
            "stroked": false,
            "filled": true,
            "fillStyle": {
                "color": [
                    1,
                    0,
                    0.73,
                    1
                ],
                "material": "",
                "materialParams": {},
                "ground": false
            },
            "points": [
                [
                    112.50551182487118,
                    24.185964202951887,
                    0.1
                ],
                [
                    112.509491893336,
                    24.18536806675219,
                    0.1
                ]
            ]
        })

        /** ---------------------------------帧序列事件------------------------------------**/
        const { createAnimateFrame } = XE2["xe2-utils"];
        const { getDistancesFromPositions } = XE2["xe2-base-objects"];
        let distance = 1000
        // 帧序列Tick
        const p = createAnimateFrame();
        // 启动
        p.start(() => {
            const { position } = objm.activeViewer.getCurrentCameraInfo();
            // 计算距离
            const distance = getDistancesFromPositions([[...position], [...sceneObj.points[0]]], 'NONE')
            sceneObj.show = distance[0] < 1000
        })


        const changeDistance = () => {
            distance = document.getElementById("distance").value
        }




    </script>
    <!-- 切换UE和Cesium引擎的组件（Vue） -->
    <div id="root">
        <switch-engine :objm="objm"></switch-engine>
    </div>
    <!-- Vue文件 -->
    <script src="./js/vue.global.js"></script>
    <!-- 切换UE和Cesium的组件 -->
    <script src="./js/switchEngineCom.js"></script>
</body>

</html>